.code-editor {
  height: 35vh;
  max-height: 50vh;
  overflow: hidden;
  @apply transition-all;
  .box {
    border: 1px solid transparent;
    box-shadow: var(--mat-sys-level1);

    .jsoneditor {
      border-color: transparent;
    }
  }
  &.less {
    height: 80vh;
    max-height: 80vh;
    @apply transition-all;
  }
  &.collapse {
    height: 0 !important;
    @apply transition-all;
  }
  ::ng-deep {
    .jsoneditor-outer {
      height: 100%;
    }
  }

  json-editor {
    ::ng-deep {
      > * {
        display: block;
        height: 100%;
      }
    }
  }
}

.code-editor-btns {
  @apply absolute left-1/2;
  top: 8px;
  transform: translateX(-50%);
  --mat-icon-button-disabled-icon-color: rgb(255 255 255 / 50%);
  --mat-icon-button-icon-color: var(--mat-sys-on-primary);
  .lock {
    pointer-events: none;
  }
  .set-bottom {
    transform: scale(0.8);
  }
}

.toolbar {
  .btn-help {
    --mat-icon-button-state-layer-size: 24px;
    line-height: 0;
  }
}
